<template>
	<view class="view">
		<view class="titles pg-30">
			<view class="font-30">充值方式</view>
			<view class="d-flex-yCenter mt-30">
				<image src="../static/weixin.png"  mode=""></image>
				<text class="font-30 ml-20">微信充值</text>
			</view>
		</view>
		<view class="body">
			<view class="font-30 mt-30">充值金额</view>
			<view class="d-flex-yCenter border-b py-20 mt-30" @tap='this.$refs.erweima.show()'>
				<text class="text">￥</text>
				<input type="number" v-model="value" :disabled="true" placeholder="请选择充值套餐" placeholder-style="font-size:28rpx;"/>
			</view>
			<view class="btn" @tap='submit'>确认收款</view>
		</view>
		<!-- 套餐 -->
		<popup ref='erweima' type='bottom' radius='6'  height='660' centerAnim='slide-up'
			:showCloseIcon='true' :maskClickClose='false' :duration='300' >
			<view class="pg-30 mt-30 d-flex flex-d">
				<view @tap='value=item.market_price;tcID=item.id;$refs.erweima.hide()' class="d-flex jfy-sb py-20 border-b" v-for="(item,index) in tcList" :key='index'>
					<text>{{item.title}} {{item.market_price}}</text>
					<text style="color: red;">￥{{item.money}}</text>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import {http_user_wallet_package,http_user_wallet_create} from '@/config/apiRouter.js'
	import popup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		data() {
			return {
				value:'',
				tcID:'',
				tcList:[]
			}
		},
		components: {
			popup
		},
		onLoad() {
			http_user_wallet_package().then(res=>{
				this.tcList=res.data
			})
		},
		methods: {
			submit(){
				if(this.tcID==''){
					this.$tool.showToast('请选择充值套餐')
					return
				}
				http_user_wallet_create({
					data:{
						package_id:this.tcID
					}
				}).then(res=>{
					console.log(res);
					this.wxPayment({
						pay_id_status:true,
						pay_log_id:res.data.pay_log_id,
						success:res=>{
							this.$tool.showToast('充值成功',true)
							setTimeout(()=>{
								this.userMD.getUserData.apply(this)
								this.$tool.navigateBack()
							},800)
						},
						fail:()=>{
							this.$tool.showToast('支付失败')
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.view{
		background: #F5F5F5;
	}
	.titles{
		background: #F5F5F5;
		image{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.text{
		font-size: 60rpx;
	}
	.body{
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;
		input{
			height: 90%;
			font-size: 60rpx;
		}
		.btn{
			width: 690rpx;
			line-height: 80rpx;
			background: #FF890B;
			border-radius: 40rpx;
			color: #fff;
			text-align: center;
			margin: 100rpx auto;
		}
	}

</style>
